
    <div class="form-group">
        <div class="col-sm-4">
            <input  type="button" value="选择文件" id="img" /> <br>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-4">
            <div class="img-cutter" id="imgCutter" >
                <div class="canvas"> <img src="" id="show_img" /></div>
                <div class="actions">
                    <h5>拖拽来剪切图片</h5>
                    <button type="button" id="confirm" class="btn btn-primary img-cutter-submit">确认</button>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <img src="__public__uploads/view.png" style="border:1px solid #dddddd;" id="is_cut" width="200" >
        </div>
    </div>

    <!--上传裁剪的图片-->
    <form method="post" class="form-horizontal" action="{:url('cut_pic/index/image_insert')}">
        <div class="form-group">
            <div class="col-sm-5">
                <input class="form-control" id="image_local_url" type="text" name="local_url" >
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-5">
                <input class="form-control" id="image_size" type="text" name="size" >
            </div>
        </div>
        <div class="form-group">e_local
            <div class="col-sm-5">
                <button class="form-control" type="submit">确定</button>
            </div>
        </div>
    </form>
<div style="display:none;" >
    <input type="text" id="pre_img" >
    <input type="text" id="get_title">
</div>

{load href="__public__static/zui/lib/imgcutter/zui.imgcutter.min.css"}
{load href="__public__static/zui/lib/imgcutter/zui.imgcutter.min.js"}

<!--上传插件-->
<link rel="stylesheet" href="__public__static/cut_img/kindeditor/themes/default/default.css" />
<script charset="utf-8" src="__public__static/cut_img/kindeditor/kindeditor-all-min.js"></script>
<script charset="utf-8" src="__public__static/cut_img/kindeditor/lang/zh_CN.js"></script>
<script>

//      //虚拟表单
//    function post() {
//        var temp = document.createElement("form");
//        temp.id = "temp";
//        temp.enctype = "multipart/form-data";
//        temp.action = "{:url('cut_pic/index/pre_img_upload')}";
//        temp.method = "post";
//        temp.style.display = "none";
//
//        var tempInput = document.createElement("input");
//        tempInput.data = "formData";
//        tempInput.type = "file";
//        tempInput.name = "image";
//        tempInput.files[0]= document.getElementById('img').files[0];
//        temp.appendChild(tempInput);
//
//        var tempButton = document.createElement("button");
//        tempButton.type="submit";
//        temp.appendChild(tempButton);
//
//
//        document.body.appendChild(temp);
//        temp.submit();
//        return temp;
//    }



    //上传原图
    KindEditor.ready(function(K) {
        var editor = K.editor({
                    uploadJson : '{:url('cut_pic/index/pre_img_upload')}',
                fileManagerJson : '',
                allowFileManager : false
    });

        //function(url, title, width, height, border, align)
        //url as title ,size as width
        K('#img').click(function() {
            editor.loadPlugin('image', function() {
                editor.plugin.imageDialog({
                    imageUrl : K('#img').val(),
                    clickFn : function(url,title) {
                        document.getElementById('show_img').src = '__public__uploads/pre_pic/'+title;
                        $('#pre_img').val('/public/uploads/pre_pic/'+title);
                        $('#get_title').val(title);
                        editor.hideDialog();
                        //出现截图界面
                        $('#imgCutter').imgCutter({
                            coverOpacity:0.6,
                            defaultWidth:240,
                            defaultHeight:135,
                            fixedRatio: true
                        });
                    }
                });
            });

        });
    });

    $('#confirm').click(function(){
        var pre_pic_title = $('#get_title').val();
        var myImgCutter = $('#imgCutter').data('zui.imgCutter');
        var myImgCutterData = myImgCutter.getData();
        var url = "{:url('cut_pic/index/img_cut')}";
        $.post(url,{pre_pic:pre_pic_title,info:myImgCutterData},function(data){
//            alert(data);
            $('#is_cut').attr('src','__public__uploads/cut_img/'+data.time+'.png');
            $('#image_local_url').val('__public__uploads/cut_img/'+data.time+'.png');
            $('#image_size').val(data.size);
        });
    });




</script>
